<template>
  <!--部门业务招待情况-->
  <div class="bottom-segmentBusiness">
    <div class="chart-title">部门业务招待情况</div>
    <div id="segmentBusiness"></div>
  </div>
</template>
<script setup>
import { EChart } from "@/utils/largeScreenEcharts.js";
import * as echarts from "echarts";
import {
  SEGMENT_BUSINESS,
} from "@/utils/configureTheObject";
import { onMounted } from "vue";
//部门业务招待情况
const segmentBusinessEcharts = () => {
  const myChart = echarts.init(document.getElementById("segmentBusiness"));
  //自适应图表
  window.addEventListener(
    "resize",
    () => {
      myChart.resize();
    },
    false,
  );
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
      confine: true, // 超出范围
      backgroundColor: "rgba(17,95,182,0.5)", //设置背景颜色
      formatter: "{b}<br>{a}：{c}元<br>{a1}：{c1}%",
    },
    legend: {
      top: "4%",
      right: "4%",
      itemWidth: 18,
      itemHeight: 10,
      itemGap: 30,
      textStyle: {
        fontSize: 12,
        color: "#fff",
        padding: [0, 0, 0, 10],
      },
    },
    grid: {
      top: "18%",
      left: "4%",
      right: "3%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: SEGMENT_BUSINESS.map((item) => item.department),
      axisTick: {
        show: false,
        alignWithLabel: true,
      },
      axisLine: {
        lineStyle: {
          color: "#1C82C5",
        },
      },
      axisLabel: {
        interval: 0,
        margin: 10,
        color: "#05D5FF",
        textStyle: {
          fontSize: 14,
          color: "#A5A9BF",
        },
        formatter: function (value) {
          return value?.split("").join("\n"); //垂直显示
        },
      },
    },
    yAxis: [
      {
        name: "年度预算/元",
        splitNumber: 5,
        type: "value",
        nameTextStyle: {
          color: "#A5A9BF",
          fontSize: 12,
        },
        axisLabel: {
          formatter: "{value}",
          color: "rgba(95, 187, 235, 1)",
          textStyle: {
            fontSize: 14,
            color: "#A5A9BF",
            lineHeight: 16,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(28, 130, 197, .3)",
            type: "dashed",
          },
        },
      },
      {
        name: "使用进度/%",
        splitNumber: 5,
        type: "value",
        nameTextStyle: {
          color: "#A5A9BF",
          fontSize: 12,
        },
        axisLabel: {
          formatter: "{value}",
          color: "rgba(95, 187, 235, 1)",
          textStyle: {
            fontSize: 14,
            color: "#A5A9BF",
            lineHeight: 16,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(28, 130, 197, .3)",
            type: "dashed",
          },
        },
      },
    ],
    series: [
      {
        name: "年度预算",
        yAxisIndex: 0,
        type: "bar",
        barWidth: "12",
        data: SEGMENT_BUSINESS.map((item) => item.budget),
        itemStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(9, 63, 109, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(1, 166, 252, 1)",
                },
              ],
            },
            borderColor: "#3681FF",
          },
        },
      },
      {
        name: "使用进度",
        yAxisIndex: 1,
        type: "line",
        showSymbol: true,
        symbolSize: 8,
        lineStyle: {
          normal: {
            color: "#02D3EA",
          },
        },
        itemStyle: {
          color: "#02D3EA",
          borderColor: "#02D3EA",
          borderWidth: 2,
        },
        label: {
          show: true,
          position: "top",
          textStyle: {
            fontSize: 14,
            color: "#91CDFE",
          },
        },
        data: SEGMENT_BUSINESS.map((item) => item.percentage), // 折线图的数据
      },
    ],
  };
  // 绘制图表
  myChart.setOption(option);
};
const segmentBusinessEcharts1 = (id) => {
  const chartObj = new EChart({ id });
  //获取图表数据
  const { title, series } = chartObj.getOriginalOption(["title", "series"]);
  //系列数据
  series.push(
    {
      ...centerEffectCircle,
      data: [
        {
          value: annualBudget,
        },
      ],
      detail: {
        show: true,
        offsetCenter: [0, "145%"],
        formatter: function (value) {
          return `{value|${value}元}\n{title|${annualName}}`;
        },
        rich: {
          value: {
            fontSize: 22,
            color: "#fff",
            lineHeight: 32,
          },
          title: {
            fontSize: 22,
            color: "#32C5FF",
          },
        },
      },
    },
    {
      ...innerLayerWithPointer,
      max: annualBudget,
      data: [
        {
          value: 1792358.76,
        },
      ],
    },
    { ...outermostScale },
  );
  //回传完整配置，执行渲染
  chartObj.setConfig({
    title,
    series,
  });
  //执行渲染
  chartObj.setOption();
};
onMounted(() => {
  segmentBusinessEcharts("segmentBusiness");
});
</script>

<style scoped lang="less">
.bottom-statisticsModule,
.bottom-businessHospitality,
.bottom-segmentBusiness,
.bottom-hospitalitySituation {
  display: flex;
  flex-direction: column;
  .chart-title {
    color: #fff;
    font-size: 20px;
  }
  #hospitalitySituation,
  #segmentBusiness,
  #businessHospitality,
  #statisticsModule {
    width: 100%;
    flex: 1;
  }
}
//单位业务招待情况
.bottom-hospitalitySituation {
  flex: 1;
}
//部门业务招待情况
.bottom-segmentBusiness {
  flex: 1.6;
}
//业务招待类型情况
.bottom-businessHospitality {
  flex: 1.3;
}
//综合类处理流程环节
.bottom-statisticsModule {
  flex: 1;
}
</style>
